<template>
  <el-dialog
    :title="$t('lang.operate.preview')"
    :model-value="modelValue"
    @close="$emit('update:modelValue', false)"
  >
    <div class="image" v-loading="loading">
      <el-image :src="imageUrl" v-if="visible" fit="fit" />
    </div>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { previewImageRequest } from '@/api/file'
import { CHECC_Static_FAST_DFS_view } from '@/constants/proxy'
import { getFile } from '@/api/subgrade'
export default defineComponent({
  emits: ['update:modelValue'],
  props: {
    fileId: {
      type: String,
      required: true,
    },
    modelValue: {
      type: Boolean,
      required: true,
    },
  },
  setup(props) {
    const imageUrl = ref('')
    const visible = ref(false)
    const loading = ref(false)
    watch(
      () => props.fileId,
      (value) => {
        if (value) {
          loading.value = true
          getFile(value)
            .then((res) => {
              // imageUrl.value = res.data.data
              imageUrl.value =
                CHECC_Static_FAST_DFS_view +
                '/' +
                res.data.data.groupName +
                '/' +
                res.data.data.fullPath
              visible.value = true
              loading.value = false
            })
            .catch(() => (loading.value = false))
        }
      }
    )
    return {
      imageUrl,
      visible,
      loading,
    }
  },
})
</script>
<style>
.image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
}
</style>
